<template>
  <div v-if="modelValue" :class="['file-preview', previewAnimation ? 'preview-open' : 'preview-close']">
    <!-- 预览头部 -->
    <div class="preview-header">
      <div class="header-left">
        <h3 class="preview-title">文件预览</h3>
        <span class="file-name">{{ fileInfo.fileName }}</span>
      </div>
      <div class="header-right">
        <el-button @click="closePreview" circle>
          <el-icon>
            <Close />
          </el-icon>
        </el-button>
      </div>
    </div>

    <!-- 预览内容区域 -->
    <div class="preview-content">
      <!-- 图片预览 -->
      <ImagePreview v-if="fileInfo.fileType === 'image'" :fileInfo="fileInfo" />

      <!-- 视频预览 -->
      <VideoPreview v-else-if="fileInfo.fileType === 'video'" :fileInfo="fileInfo" />

      <!-- 音频预览 -->
      <AudioPreview v-else-if="fileInfo.fileType === 'audio'" :fileInfo="fileInfo" />

      <!-- PDF预览 -->
      <PdfPreview v-else-if="fileInfo.fileType === 'pdf'" :fileInfo="fileInfo" />

      <!-- 文本预览 -->
      <TextPreview v-else-if="fileInfo.fileType === 'doc' || isTextFile" :fileInfo="fileInfo" />

      <!-- 默认预览（不支持的文件类型） -->
      <DefaultPreview v-else :fileInfo="fileInfo" />
    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue'
import { Close } from '@element-plus/icons-vue'
import ImagePreview from './ImagePreview.vue'
import VideoPreview from './VideoPreview.vue'
import AudioPreview from './AudioPreview.vue'
import PdfPreview from './PdfPreview.vue'
import TextPreview from './TextPreview.vue'
import DefaultPreview from './DefaultPreview.vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  fileInfo: {
    type: Object,
    default: () => ({})
  }
})
const emit = defineEmits(['update:modelValue'])
const previewAnimation = ref(false)
// 判断是否为文本文件
const isTextFile = computed(() => {
  if (!props.fileInfo.fileName && !props.fileInfo.fileUrl) return false

  const textExtensions = [
    'txt', 'md', 'json', 'xml', 'html', 'css', 'js', 'ts',
    'vue', 'jsx', 'tsx', 'py', 'java', 'cpp', 'c', 'h',
    'php', 'rb', 'go', 'rs', 'swift', 'kt', 'scala',
    'yml', 'yaml', 'toml', 'ini', 'conf', 'log'
  ]

  // 优先从文件名获取扩展名，否则从URL获取
  const fileName = props.fileInfo.fileName || props.fileInfo.fileUrl
  const extension = fileName.split('.').pop()?.toLowerCase()
  return textExtensions.includes(extension || '')
})

const closePreview = () => {
  previewAnimation.value = false;
  setTimeout(() => {
    emit('update:modelValue', false);
  }, 300);
};
watch(()=>props.modelValue, (newVal) => {
  previewAnimation.value = newVal;
})
</script>

<style lang="scss" scoped>
.file-preview {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: 800px;
  height: 600px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;

  /* 弹窗打开动画 - 从小缩放 */
  &.preview-open {
    animation: scaleIn 0.3s ease-out forwards;
  }

  /* 弹窗关闭动画 - 缩小消失 */
  &.preview-close {
    animation: scaleOut 0.3s ease-in forwards;
  }

  @media (max-width: 768px) {
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    overflow: auto;
  }

  /* 缩放进入动画 */
  @keyframes scaleIn {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0);
    }

    100% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  /* 缩放退出动画 */
  @keyframes scaleOut {
    0% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0);
    }
  }
}

.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
  background: #fafafa;

  .header-left {
    display: flex;
    align-items: center;
    gap: 16px;

    .preview-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin: 0;
    }

    .file-name {
      font-size: 14px;
      color: #666;
      max-width: 250px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .header-right {
    display: flex;
    align-items: center;
  }
}

.preview-content {
  flex: 1;
  overflow: auto;
  background-color: #f5f5f5;
}
</style>
